<template>
    <div class="navbtmbox">
        <ul>
            <li v-for="(item, index) in navlist" :key="index" :class="{nav_active:offClass==index}" @click="offClass=index">
                <div :class="item.divclass"></div>
                <p>{{item.name}}</p>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "navTab",
        data(){
            return {
                offClass:"1",
                navlist:[
                    {
                        name:"推广赚钱",
                        divclass:"nav_1"
                    },
                    {
                        name:"我的客户",
                        divclass:"nav_2"
                    },
                    {
                        name:"个人中心",
                        divclass:"nav_3"
                    }
                ]
            }
        }
    }
</script>

<style scoped lang="less">
    .navbtmbox{
        width: 100%;
        height: 0.98rem;
        position: fixed;
        left: 0;
        bottom: 0;
        ul{
            overflow: hidden;
            width: 100%;
            height: 0.98rem;
            .nav_active p{
                color:rgba(38,119,249,1);
            }
            .nav_active .nav_1{
                background: url("../img/nav_share.png") center center no-repeat;
                background-size: 100% auto;
            }
            .nav_active .nav_2{
                background: url("../img/nav_customer.png") center center no-repeat;
                background-size: 100% auto;
            }
            .nav_active .nav_3{
                background: url("../img/nav_person.png") center center no-repeat;
                background-size: 100% auto;
            }
            li{
                float: left;
                width: 33.33%;
                height: 0.98rem;
                background: #ffa18c;
                cursor: pointer;
                div{
                    width: 0.42rem;
                    height: 0.42rem;
                    margin: 0.12rem auto 0.05rem auto;
                }
                .nav_1{
                    background: url("../img/nav_share1.png") center center no-repeat;
                    background-size: 100% auto;
                }
                .nav_2{
                    background: url("../img/nav_customer1.png") center center no-repeat;
                    background-size: 100% auto;
                }
                .nav_3{
                    background: url("../img/nav_person1.png") center center no-repeat;
                    background-size: 100% auto;
                }
                p{
                    text-align: center;
                    font-size:0.24rem;
                    font-weight:500;
                    color:rgba(163,163,163,1);
                }
            }
        }
    }
</style>
